<template>
    <n-data-table
        :columns="columns"
        :data="data"
        :pagination="pagination"
        :bordered="false"
    />
</template>

<script>
import {NButton, NDataTable, useMessage} from "naive-ui";


const createColumns = ({play,add}) => {
    return [
        {
            title: "No",
            key: "no"
        },
        {
            title: "Title",
            key: "title"
        },
        {
            title: "Length",
            key: "length"
        },
        {
            title: "Action",
            key: "actions",
            render(row) {
                return h(
                    NButton,
                    {
                        strong: true,
                        tertiary: true,
                        size: "small",
                        onClick: () => play(row)
                    },

                    {default: () => "Play"}
                );
            }
        },
        {
            title: "123",
            key: "123",
            render(row) {
                return h(
                    NButton,
                    {
                        strong: true,
                        tertiary: true,
                        size: "small",
                        onClick: () => add(row)
                    },

                    {default: () => "Add"}
                );
            }

        }
    ];
};

const data = [
    {no: 3, title: "Wonderwall", length: "4:18"},
    {no: 4, title: "Don't Look Back in Anger", length: "4:48"},
    {no: 12, title: "Champagne Supernova", length: "7:27"}
];

export default({
    setup() {
        const message = useMessage();
        return {
            data,
            columns: createColumns({
                play(row) {
                    message.info(`Play ${row.title}`);
                },
                add(row) {
                    message.info(`Add ${row.title}`);
                }
            }),
            pagination: false
        };
    }
});
</script>
<style>
.data-table-wrapper {
    height: 100%;
}
</style>